<template>
    <div class="ChangeForm">
        <Row>
            <Form ref="formValidate" :model="formValidate" :label-width="80">
                <Col span="24">
                    <Row>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="申请编号" prop="applyNo">
                                <Input clearable v-model="formValidate.applyNo" placeholder/>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="客户姓名" prop="custName">
                                <Input clearable v-model="formValidate.custName" placeholder/>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6" v-if="!isSP">
                            <FormItem label="来源" prop="dataSource">
                                <Select v-model="formValidate.dataSource" placeholder clearable>
                                    <Option v-for="(item,index) in dataDict.dataSourceDict" :key="index"
                                            :value="item.value">{{item.title}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="处理状态" prop="processStatus">
                                <Select v-model="formValidate.processStatus" clearable placeholder>
                                    <Option v-for="(item,index) in dataDict.processStatusDict" :key="index"
                                            :value="item.value">{{item.title}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6" v-if="!isSP">
                            <FormItem label="合同号" prop="contractNo">
                                <Input clearable v-model="formValidate.contractNo" placeholder/>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="申请时间" prop="createDate">
                                <!-- <DatePicker
                                    type="date"
                                    format="yyyy-MM-dd"
                                    placeholder
                                    v-model="formValidate.startCreateDate"
                                ></DatePicker>-->
                                <DatePicker
                                    v-model="formValidate.createDate"
                                    type="daterange"
                                    format="yyyy-MM-dd"
                                    separator=" 到 "
                                    clearable
                                    @on-change="createDateRange"
                                    placeholder
                                ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="结束时间" prop="finishDate">
                                <!-- <DatePicker type="date" format="yyyy-MM-dd" placeholder v-model="formValidate.endDate"></DatePicker> -->
                                <DatePicker
                                    v-model="formValidate.finishDate"
                                    type="daterange"
                                    separator=" 到 "
                                    format="yyyy-MM-dd"
                                    clearable
                                    @on-change="finishDateRange"
                                    placeholder
                                ></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Col>

                <Col span="24">
                    <div class="contract-close-btns">
                        <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-search"
                                style="margin-right:16px">搜索
                        </Button>
                        <Button type="primary" @click="handleReset('formValidate')" icon="ios-trash-outline">重置</Button>
                    </div>
                </Col>
            </Form>
            <Col span="24">
                <Button type="primary" class="export-btn" @click="openModal">新增申请</Button>
                <Button v-if="!isSP" type="primary" class="export-btn" @click="exportData" icon="md-list-box">导出报表</Button>
            </Col>
        </Row>
    </div>
</template>
<script>

    export default {
        props: {
            formValidate: {
                type: Object,
                required: true
            },
            formValidateRule: {
                type: Object,
                required: true
            },
            dataDict: {
                type: Object,
                required: true
            },
            isSP: {
                type: Boolean,
                required: true,
                default: true
            },
            loading: {
                type: Boolean,
                required: true,
                default: true
            },
        },
        data() {
            return {
                // loading: false,
                createDate: null,
                finishDate: null
            };
        },
        mounted() {
        },
        computed: {},
        methods: {
            init() {
            },
            // 查询
            handleSubmit(name) {
                if (this.loading) return;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$emit("getList", this.formValidate);
                    }
                });
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.formValidate.startCreateDate = '';
                this.formValidate.endCreateDate = '';
                this.formValidate.startFinishDate = '';
                this.formValidate.endFinishDate = '';
                this.handleSubmit(name)
            },
            openModal() {
                this.$emit("showModal");
            },
            exportData() {
                this.$emit("exportDataClick");
            },
            createDateRange(v) {
                if (v) {
                    this.formValidate.startCreateDate = v[0];
                    this.formValidate.endCreateDate = v[1];
                }
            },
            finishDateRange(v) {
                if (v) {
                    this.formValidate.startFinishDate = v[0];
                    this.formValidate.endFinishDate = v[1];
                }
            },
        }
    };
</script>
<style scoped>
    .export-btn {
        margin-bottom: 16px;
    }

    .contract-close-btns {
        padding-bottom: 28px;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
    }
</style>
